
import { Button, Checkbox } from "@antmjs/vantui";
import { Text, View } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useState } from "react";

const FillingGuide: React.FC = () => {
  const [isRead, setIsRead] = useState(false);
  return (
    <View className="w-full h-[100vh] flex flex-col bg-white">
      <View className="flex flex-col gap-2 p-4">
        <View className="text-[#694111] text-[36px] font-bold">
          每日食品安全检查-操作指南
        </View>
        <View>当前企业  演示账号（江门生产）</View>
        <View>企业类别  普通食品生产</View>
      </View>
      <View className="flex-1 w-full bg-slate-100 p-4 flex flex-col gap-2">
        <View className="text-[#694111] text-base">填报流程</View>
        <View className="flex flex-row p-3 bg-white rounded">
          <View className="flex flex-col items-center">
            <View className="w-6 h-6 bg-blue-500 rounded-xl text-white flex items-center justify-center">
              1
            </View>
            <View className="w-px h-9 bg-slate-300 flex ">
            </View>
            <View className="w-6 h-6 bg-blue-500 rounded-xl text-white flex items-center justify-center">
              2
            </View>
            <View className="w-px h-9 bg-slate-300 flex ">
            </View>
            <View className="w-6 h-6 bg-blue-500 rounded-xl text-white flex items-center justify-center">
              3
            </View>
          </View>
          <View className="flex-1 flex-col ml-3">
            <View className="text-base font-medium pb-1">
              检查填报
            </View>
            <View className="text-sm text-slate-500">
              依据指定的检查内容如实填报检查情况
            </View>
            <View className="text-base font-medium pb-0.5 pt-2.5">
              自检结论
            </View>
            <View className="text-sm text-slate-500">
              依据检查情况填写自检结论
            </View>
            <View className="text-base font-medium pb-0.5 pt-2.5">
              信息提交
            </View>
            <View className="text-sm text-slate-500">
              核对填报信息，确认无误后提交
            </View>
          </View>
        </View>
        <View className="flex-1"></View>
        <View className="flex flex-row items-center justify-between text-xs flex-nowrap">
          <Checkbox
            value={isRead}
            onChange={(e) => {
              setIsRead(e.detail);
            }}
            shape="square"
            iconSize={40}
            checkedColor="#38f"
          >
            我已认真阅读并同意
          </Checkbox>
          <Text
            className="text-[#38f]"
            onClick={() => {
              Taro.navigateTo({
                url: "/pages/IntelFilling/components/WeekReport/components/LetterOfCommitment/index",
              });
            }} 
          >
            《企业主体责任落实上报承诺书》
          </Text>
        </View>
        <Button
          type="info"
          className="w-full"
          onClick={() => {
            Taro.navigateTo({
              url: "/pages/IntelFilling/components/DayReport/components/checkFill/index",
            });
          }}
        >
          开始填报
        </Button>
      </View>
    </View>
  );
};



export default FillingGuide;
